<!-- 转正审批发起 -->
<template>
  <PageHeaderNew
    :title="title"
    :breadCrumb="breadCrumb"
    :showBack="true"
  ></PageHeaderNew>

  <div class="container">
    <h1 class="title">转正发起</h1>
    <a-form :model="formData.list" label-align="left" autoLabelWidth>
      <a-form-item label="员工个人信息" field="" class="header"></a-form-item>
      <a-row>
        <a-col :span="12">
          <a-form-item
            label="姓名："
            field=""
            :label-col-style="{
              justifyContent: 'end'
            }"
          >
            <a-input></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item
            label="部门："
            field=""
            :label-col-style="{
              justifyContent: 'end'
            }"
          >
            <a-input></a-input>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </div>
</template>

<script lang="ts" setup>
const route = useRoute();
const id = route.query.id;
const title = '转正审批发起';

const breadCrumb: string[] = ['人事', '人员管理', '转正管理', '转正审批发起'];

const formData = reactive({
  list: {}
});
</script>

<style lang="less" scoped>
.container {
  padding: 0 20px;

  .title {
    text-align: center;
  }
  .header {
    position: relative;
    height: 36px;
    border-radius: 4px;
    line-height: 36px;
    font-weight: 700;
    /* 自动布局 */
    padding: 7px 16px 7px 0px;
    margin-bottom: 10px;
    background: #edeffd;
  }
  .header::before {
    position: relative;
    top: 5px;
    left: 10px;
    display: inline-block;
    height: 25px;
    width: 5px;
    margin-right: 20px;
    border-radius: 2px;
    // transform: translateY(-50%);
    content: '';
    background-color: #165dff;
  }
}
</style>
